import React from 'react'
import { RootState, useDispatch, useSelector } from '@/redux'
import { changeCollapse } from '@/redux/modules/menu'
import { Tooltip } from 'antd'
import { useTranslation } from 'react-i18next'

const Collapse = () => {
  const dispatch = useDispatch()
  const { t } = useTranslation()
  const { isCollapse } = useSelector((state: RootState) => state.menu)

  return (
    <Tooltip title={isCollapse ? t('unfold') : t('fold')}>
      <i
        className={['icon-style', 'iconfont', isCollapse ? 'icon-zhankai' : 'icon-shouqi'].join(' ')}
        onClick={() => dispatch(changeCollapse(!isCollapse))}
      />
    </Tooltip>
  )
}

export default Collapse
